<template>
    <div class="continer spaceDetail">
        <!-- 空间详情页面 -->
        <div class="detailTitle">园区概况{{id}}</div>
        <div class="detailImg">
            <img :src="spaceList.plan" />
        </div>
        <div class="detailImgTitle">空间平面图</div>
        <div class="detailText">
            <div>空间名称：</div>
            <el-input type="text" v-model="spaceList.name" :disabled="disabled"></el-input>
        </div>
        <div class="detailText">
            <div>空间地址：</div>
            <el-input type="text" v-model="spaceList.addr" :disabled="disabled"></el-input>
        </div>
        <div class="detailText">
            <div>空间概况的文字描述：</div>
            <el-input type="textarea" :rows="6" v-model="spaceList.description" :disabled="disabled"></el-input>
        </div>
        <div class="closeDetail">
            <el-button type="primary" @click="closeDetail">关闭</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "spaceDetail",
        beforeRouteEnter(to, form, next) { // 进入页面前
           next();
        },
        data() {
            return {
                detailImgSrc: "",
                id: null,
                spaceList: {},
                disabled: true
            };
        },
        methods: {
            // 获取数据
            getList(){
                let spaceList = window.localStorage.getItem("spaceList");
                this.spaceList = JSON.parse(spaceList);
                this.spaceList.plan = "http://scapi.raysightiot.cn/" + this.spaceList.plan;
            },
            // 关闭按钮
            closeDetail(){
                window.history.back(-1); // 返回上一页
                window.localStorage.removeItem("spaceList");
            }
        },
        created() {
            this.getList();
        }
    };
</script>

<style>
.spaceDetail{
    color: #000000;
}
.detailTitle{
    text-align: center;
}
.detailImg{
    width: 100%;
    height: 480px;
    margin: 20px auto 0;
    border: 1px solid #000066;
}
.detailImgTitle{
    text-align: center;
    margin: 10px 0 30px;
}
.detailImg img{
    width: 100%;
    height: 100%;
}
.detailText{
    max-width: 1200px;
    margin: 0 auto;
}
.detailText div{
    margin-bottom: 10px;
}
.closeDetail{
    float: right;
    margin-right: 150px;
    margin-top: 30px;
}
.el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner{
    color: #606266;
}
</style>
